@import './variable.scss';

@mixin dk-icon {
  display: inline-block;

  width: 16px;
  height: 16px;

  margin-right: 16px;
  background-size: cover;
}

@mixin font(
  $font-size: 16px,
  $font-weight: 0,
  $color: $main-color,
  $line-height: 16px
) {
  font-family: $font-family;
  font-size: $font-size;
  font-weight: $font-weight;
  color: $color;
  line-height: $line-height;
}
@mixin flex-container(
  $flex-direction: row,
  $align-items: center,
  $justify-content: space-between
) {
  display: flex;
  flex-direction: $flex-direction;
  align-items: $align-items;
  justify-content: $justify-content;
}
//默认定位布局
@mixin pos-box($position:absolute,$top:auto,$right:auto,$bottom:auto,$left:auto){
  position: $position;
  top: $top;
  bottom: $bottom;
  right: $right;
  left: $left;
}

//清除浮动
@mixin clear{
  clear: both;
  &:after{
    content: '';
    display: block;
    clear: both;
  }
}
@mixin button(
  $background-color: $button-color,
  $color: #ffffff,
  $border: 0px,
  $outline: 0px
) {
  cursor: pointer;

  background-color: $background-color;
  color: $color;
  border: $border;
  outline: $outline;
}

//限制行数为n行
@mixin line-limit-n($-webkit-line-clamp : 1){
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $-webkit-line-clamp;
  -webkit-box-orient: vertical;
}


// 默认按钮
@mixin button($width:2rem,$height:auto,$border-radius:0.05rem,$background: $primary-color,$border-color: $primary-color, $color:#FFFFFF) {
  width: $width;
  line-height: $height;
  text-align: center;
  border-radius: $border-radius;
  background: $background;
  border: 1px solid $border-color;
  color: $color;
  cursor: pointer;
  font-size: 0.36rem;
}

// 提交按钮（主色）
@mixin btn-primary(){ @include button(100%,0.92rem,0.05rem,$primary-color,$primary-color,#fff) }

// 提交按钮（次色）
@mixin btn-secondary(){ @include button(100%,0.92rem,0.05rem,$secondary-color,$secondary-color,#fff) }

// 提交按钮（无效）
@mixin btn-disable(){ @include button(100%,0.92rem,0.05rem,$button-disabled-color,$button-disabled-color,#fff) }



// 尾部添加小icon
// @mixin icon-box(){
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   &:after{
//     content: '';
//     display: block;
//     width:10px;
//     height: 10px;
//     background-size: contain !important;
//   }
// }

// 尾部添加向右icon
// @mixin icon-box-right() {
//   @include icon-box;
//   &:after{
//     background: url(~assets/images/ic_my_open.png) no-repeat center;
//   }
// }

// 尾部添加向上icon
// @mixin icon-box-up() {
//   @include icon-box;
//   &:after{
//     background: url(~assets/images/ic_home_advanced_search_more.png) no-repeat center;
//   }
// }

// 尾部添加向下icon
// @mixin icon-box-down() {
//   @include icon-box;
//   &:after{ background: url(~assets/images/ic_home_advanced_search_more.png) no-repeat center; }
// }

// 尾部添加向下icon2
// @mixin icon-box-down2() {
//   @include icon-box;
//   width: 14px;
//   height: 14px;
//   &:after{ background: url(~assets/images/ic_collection_new_built_open.png) no-repeat center; }
// }

// 选择状态的icon
// @mixin icon-select(){
//   display: inline-block;
//   vertical-align: middle;
//   min-width: 0.3rem;
//   width: 0.3rem;
//   height: 0.3rem;
//   border-radius: 100%;
//   background-size: 100% 100% !important;
//   background: #ffffff url(~assets/images/ic_home_right2_formal.png);
//   &.on{background: #ffffff url(~assets/images/ic_home_right2_light.png);}
// }
